<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.2.0.css" />
    <style>
        header.header {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 17px;
            color: #fff;
        }

        main {
            width: 80%;
            padding-top: 170px;
            text-align: center;
            margin: 270px auto 0 auto;
        }

        main>div:last-child>button {
            margin-top: 130px;
            border: none;
            outline: none;
            width: 160px;
            height: 50px;
            line-height: 40px;
            background-color: #0064B0;
            color: #fff;
            font-size: 17px;
            border-radius: 10px;
        }

        #canvas {
            position: fixed;
            z-index: -1;
        }

        #login-content {
            width: 100%;
            overflow: hidden;
        }

        body {
            background-image: url('./image/5a90bf08689c8_1024.jpg');
            background-repeat: no-repeat;
            background-position: top center;
            width: 100%;
            height: 100vh;
            background-color: #fff;
        }

        .aui-list-item.aui-list-item-inner {
            width: 90% !important;
            overflow: hidden;
        }

        .aui-list.aui-list-item:after,
        .aui-list-item::after,
        .aui-list.aui-form-list::after,
        .aui-list.aui-form-list::before {
            display: none !important;
        }

        .aui-form-list {
            width: 80%;
            /*border: 1px solid #999;*/
            margin: 0 auto;
        }

        .aui-list-item-inner {
            border: 1px solid #eee;
        }

        .aui-list-item-label-icon {
            margin-left: 10px !important;
        }
    </style>
</head>

<body>
    <div id="login-content">
        <!-- <canvas id="canvas" height="100vh" width="100vw"></canvas> -->
        <!-- <header id="header" class="aui-bar aui-bar-nav">登录</header> -->
        <main>
            <ul class="aui-list aui-form-list">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label-icon">
                            <i class="aui-iconfont aui-icon-mobile"></i>
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" id="User_AccountNumber" placeholder="username">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item" style="margin-top: 30px;">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label-icon">
                            <i class="aui-iconfont aui-icon-lock"></i>
                        </div>
                        <div class="aui-list-item-input">
                            <input type="password" id="User_Password" placeholder="password">
                        </div>
                    </div>
                </li>
            </ul>
            <div>
                <button type="button" tapmode onclick="getAuthenticateUsers()">登录</button>
            </div>
        </main>
    </div>
</body>

</html>
<script src="./script/api.js" charset="utf-8"></script>
<script src="./script/vue.js" charset="utf-8"></script>
<script src="./js/jquery.min.js" charset="utf-8"></script>
<script src="./js/ToConfigure.js" charset="utf-8"></script>
<script>
    apiready = function () {
        var vm = new Vue({
            el: '#login-content',
            data: {
                password: '',
                accountName: ''
            }
        })
        // var canvas = $api.byId("canvas");
        // var ctx = canvas.getContext("2d");
        // resize();
        // window.onresize = resize;
        //
        // function resize() {
        //     canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        //     canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        // }
        // var RAF = (function() {
        //     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
        //         window.setTimeout(callback, 1000 / 60);
        //     };
        // })();
        // // 鼠标活动时，获取鼠标坐标
        // var warea = {
        //     x: null,
        //     y: null,
        //     max: 20000
        // };
        // window.onmousemove = function(e) {
        //     e = e || window.event;
        //     warea.x = e.clientX;
        //     warea.y = e.clientY;
        // };
        // window.onmouseout = function(e) {
        //     warea.x = null;
        //     warea.y = null;
        // };
        // // 添加粒子
        // // x，y为粒子坐标，xa, ya为粒子xy轴加速度，max为连线的最大距离
        // var dots = [];
        // for (var i = 0; i < 150; i++) {
        //     var x = Math.random() * canvas.width;
        //     var y = Math.random() * canvas.height;
        //     var xa = Math.random() * 2 - 1;
        //     var ya = Math.random() * 2 - 1;
        //     dots.push({
        //         x: x,
        //         y: y,
        //         xa: xa,
        //         ya: ya,
        //         max: 6000
        //     })
        // }
        // // 延迟100秒开始执行动画，如果立即执行有时位置计算会出错
        // setTimeout(function() {
        //     animate();
        // }, 100);
        // // 每一帧循环的逻辑
        // function animate() {
        //     ctx.clearRect(0, 0, canvas.width, canvas.height);
        //     // 将鼠标坐标添加进去，产生一个用于比对距离的点数组
        //     var ndots = [warea].concat(dots);
        //     dots.forEach(function(dot) {
        //         // 粒子位移
        //         dot.x += dot.xa;
        //         dot.y += dot.ya;
        //         // 遇到边界将加速度反向
        //         dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1;
        //         dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1;
        //         // 绘制点
        //         ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
        //         // 循环比对粒子间的距离
        //         for (var i = 0; i < ndots.length; i++) {
        //             var d2 = ndots[i];
        //             if (dot === d2 || d2.x === null || d2.y === null) continue;
        //             var xc = dot.x - d2.x;
        //             var yc = dot.y - d2.y;
        //             // 两个粒子之间的距离
        //             var dis = xc * xc + yc * yc;
        //             // 距离比
        //             var ratio;
        //             // 如果两个粒子之间的距离小于粒子对象的max值，则在两个粒子间画线
        //             if (dis < d2.max) {
        //                 // 如果是鼠标，则让粒子向鼠标的位置移动
        //                 if (d2 === warea && dis > (d2.max / 2)) {
        //                     dot.x -= xc * 0.01;
        //                     dot.y -= yc * 0.01;
        //                 }
        //                 // 计算距离比
        //                 ratio = (d2.max - dis) / d2.max;
        //                 // 画线
        //                 ctx.beginPath();
        //                 ctx.lineWidth = ratio / 2;
        //                 ctx.strokeStyle = 'rgba(30,144,255,' + (ratio + 0.2) + ')';
        //                 ctx.moveTo(dot.x, dot.y);
        //                 ctx.lineTo(d2.x, d2.y);
        //                 ctx.stroke();
        //             }
        //         }
        //         // 将已经计算过的粒子从数组中删除
        //         ndots.splice(ndots.indexOf(dot), 1);
        //     });
        //     RAF(animate);
        // }

        var header = $api.byId('header'); // 获取头部
        $api.fixStatusBar(header); // 处理ios兼容

    }
    function getAuthenticateUsers() {
        //查询用户名信息
        var User = new Object();
        //用户账号
        User.userAccountNumber = document.getElementById("User_AccountNumber").value;
        //判断是否为空
        if (User.userAccountNumber == null || User.userAccountNumber == "") {
            api.toast({
                msg: '请输入用户名',
                duration: 1000,
                location: 'bottom'
            });
            return;
        }
        //用户密码
        User.userPassword = document.getElementById("User_Password").value;
        if (User.userPassword == null || User.userPassword == "") {
            api.toast({
                msg: '请输入密码',
                duration: 1000,
                location: 'bottom'
            });
            return;
        }
        //转换为json数据

        var UserJson = JSON.stringify(User);
        /**
         * 验证是否为空
         */
        if (UserJson) {
            //获取所属医院IP地址
            var Url_IP = ToConfigure_IP("Gorgeous");
            /**
             * 验证用户信息
             */
            $.ajax({
                url: Url_IP + 'systemmanagement/userinformation/getAuthenticateUsers',
                type: 'post',
                async: false,
                contentType: "application/json",
                dataType: "json",
                data: UserJson,
                success: function (result) {
                    /**
                     * 验证成功失败
                     */
                    if (result.success == true) {
                        //api.setPrefs设置登录成功状态
                        api.toast({
                            msg: '登录成功',
                            duration: 1000,
                            location: 'bottom'
                        });
                        getUserInformation();
                        //传入登录用户名
                        setTimeout(function () {
                            api.openWin({
                                name: 'index',
                                url: './html/footer.html',
                                scrollEnabled: false,
                                pageParam: {
                                    userName:document.getElementById("User_AccountNumber").value
                                }
                            });
                        }, 1000)
                    } else {
                        /**
                         *  提示错误信息
                         */
                        api.toast({
                            msg: '登录失败，请联系管理员！',
                            duration: 1000,
                            location: 'bottom'
                        });
                    }
                },
                error: function (result) {
                    api.toast({
                        msg: '登录失败，请联系管理员！',
                        duration: 1000,
                        location: 'bottom'
                    });
                }
            });
        }
    }

     /**
     * 查询登陆人
     * @param currPage 当前页
     */
     function getUserInformation() {
        //定义toast提示框
        var UrlIP = ToConfigure_IP("Gorgeous");

        var jsParms=new Object();
        jsParms.userAccountNumber=document.getElementById("User_AccountNumber").value
        /**
         * 请求控制器
         */
        $.ajax({
            url: UrlIP + '/systemmanagement/userinformation/getUserInformation',
            type: 'post',
            async: false,
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(jsParms),
            success: function (result) {
                /**
                 * 验证返回信息是否为空
                 */
                if (result.success == true) {
                    /**
                     *  循环object
                     */
                    $.each(result.data.list, function (i, o) {
                    // console.log("-------2-------："+result.data.list[0].userName);
                        //登陆人姓名
                        document.getElementById("User_AccountNumber").value=(o.userName);
                    })
                } else {

                }
            },
            error: function (result) {

            }
        });
    }

</script>